<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      currentGET("big6", { companyName: this.companyName }).then((res) => {
        console.log("安装计划", res);
        if (res.success) {
          this.init(res.data);
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init(newData) {
      this.options = {
        // backgroundColor: '#fff',
        title: {
            // text: "订单量（个）",
            right: "18px",
            top: "0",
            textStyle: {
                color: "#999",
                fontSize: 12,
                fontWeight: '400'
            }
        },
        color: ['#e86452', '#00eaff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        grid: {
          top: '10%',
          right: '5%',
          left: '7%',
          bottom: '10%',
        },
        legend: {
            data: [
              {
                name: '昨日',
                icon: 'react',
              },
              {
                name: '今日',
                icon: 'react',
              }
            ],
            right: '20px',
            top: 0,
            textStyle: {
              color: "#fff"
            },
            itemWidth: 10,
            itemHeight: 10,
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['24:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
            },
            axisLine: {
                lineStyle: {
                    color: '#03405d'
                }
            },
            axisLabel: {
                color: '#F3F4F4',
                textStyle: {
                    fontSize: 12
                },
            },
        },
        yAxis: {
            type: 'value',
            name: '单 位：m',
            max: 750,
            interval: 150,
            nameTextStyle: {
              color: '#FFF'
            },
            axisLabel: {
                color: '#F3F4F4',
                textStyle: {
                    fontSize: 12
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#03405d'
                }
            },
            axisLine: {
                show: false
            },
        },
        series: [{
                name: '昨日',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: [195,620,660,644,550,565,376, 200, 380]
            },
            {
                name: '今日',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: [180,354,334,134,335,453,556, 456, 440]
            }
        ]
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
